<div>
  <nz-spin [nzSpinning]="isSpinning" [nzTip]="'正在初始化模块信息...'">
    <section class="in-index" *ngIf="viewType==0 ">
      <!--<p class="title">-->
        <!--<span>{{componentConfig.ModuleCaption}}</span>-->
      <!--</p>-->
      <!--<div class="table-operations" style="margin: 16px 0;padding: 0 2%">-->
        <!--<a class="btn btn-active"  (click)="toAddDrillRecord()">-->
          <!--<i class="anticon anticon-plus"></i>-->
          <!--<span>新增</span>-->
        <!--</a>-->
        <!--<a class="btn" >-->
          <!--<i class="anticon anticon-reload"></i>-->
          <!--<span>刷新</span>-->
        <!--</a>-->
      <!--</div>-->
      <div style="margin: auto;" *ngIf="!listEntities.entities || listEntities.entities.length==0">
        <h1 style="margin: 30px; text-align: center;">没有可以参加的演练</h1>
      </div>

      <ul class="course-list">
        <li class="course-list-add" (click)="toAddDrillRecord()">
          <img src="./assets/img/add-img.png" alt="">
          新建
        </li>
        <li *ngFor="let item of listEntities.entities;let i = index" [class]="'bg-' + (i%4 +1)">
          <p class="course-title">
            {{item.subjectName}}
          </p>
          <div class="course-info">
            创建时间：{{item.courseName}}
            <br> 演练类型：
            <span *ngIf="item.drillType==0">自由演练</span>
            <span *ngIf="item.drillType==1">角色演练</span>
            <span *ngIf="item.drillType==2">分组演练</span>
            <br> 演练状态：
            <span class="status" *ngIf="item.drillStatus==0" style="color: #ccc">未开始</span>
            <span class="status" *ngIf="item.drillStatus==1" style="color: palegreen">正在进行</span>
            <span class="status" *ngIf="item.drillStatus==2" style="color: red">已结束</span>
            <br> 创建时间：{{item.creationTime|date:'yyyy-MM-dd'}}
          </div>
          <div class="course-btn">
            <a *ngIf="(item.drillStatus==0)&&(item.creatorId==item.thisUserId)" (click)="startDrill(item.id,item.drillType)">
              <img src="./assets/img/c-icon-1.png" alt="">
            </a>
            <a *ngIf="item.drillStatus==1" (click)="toDrillStep(item)">
              <img src="./assets/img/c-icon-4.png" alt="">
            </a>
            <a *ngIf="item.drillStatus==2" (click)="toUploadReport(item)">
              <img src="./assets/img/c-icon-5.png" alt="">
            </a>
            <a (click)="editDetail(item)">
              <img src="./assets/img/c-icon-2.png" alt="">
            </a>
            <a (click)="deleteDrill(item.id)">
              <img src="./assets/img/c-icon-3.png" alt="" >
            </a>
          </div>
        </li>
      </ul>
      <!--<ng-container *ngIf="listEntities.entities && listEntities.entities.length>0">-->
        <!--<div style="padding: 0 calc(2% - 10px)">-->
          <!--<nz-card nzHoverable style="width:240px;"class="drillcard"title="{{item.subjectName}}"-->
                   <!--[nzLoading]="loadingData" *ngFor="let item of listEntities.entities"-->
                   <!--nzTitle="{{item.subjectName}}" [nzActions]="[actionSetting,actionEdit,actionDelete]">-->
            <!--<p>-->
              <!--创建时间：{{item.courseName}}-->
              <!--<br> 演练类型:-->
              <!--<span *ngIf="item.drillType==0">自由演练</span>-->
              <!--<span *ngIf="item.drillType==1">角色演练</span>-->
              <!--<span *ngIf="item.drillType==2">分组演练</span>-->
              <!--<br> 演练状态:-->
              <!--<span *ngIf="item.drillStatus==0">未开始</span>-->
              <!--<span *ngIf="item.drillStatus==1" style="color: palegreen">正在进行</span>-->
              <!--<span *ngIf="item.drillStatus==2" style="color: red">已结束</span>-->
              <!--<br> 创建时间：{{item.creationTime|date:'yyyy-MM-dd'}}-->
            <!--</p>-->
            <!--<ng-template #actionEdit >-->
              <!--<i *ngIf="item.creatorId==item.thisUserId" title="编辑演练信息" class="anticon anticon-edit" (click)="editDetail(item)"></i>-->
            <!--</ng-template>-->
            <!--<ng-template #actionSetting >-->
              <!--<i *ngIf="(item.drillStatus==0)&&(item.creatorId==item.thisUserId)" title="开始演练" class="anticon anticon-play-circle-o" (click)="startDrill(item.id,item.drillType)"></i>-->
              <!--<i *ngIf="item.drillStatus==1" class="anticon anticon-arrow-right" title="进入演练" (click)="toDrillStep(item)"></i>-->
              <!--<i *ngIf="item.drillStatus==2" class="anticon anticon-profile" title="上传演练报告" (click)="toUploadReport(item)"></i>-->
            <!--</ng-template>-->

            <!--<ng-template #actionDelete >-->
              <!--<i *ngIf="item.creatorId==item.thisUserId" title="删除演练" class="anticon anticon-delete" (click)="deleteDrill(item.id)"></i>-->
            <!--</ng-template>-->
          <!--</nz-card>-->
        <!--</div>-->
      <!--</ng-container>-->


    </section>
    <nz-pagination style="float: right;" [(nzPageIndex)]="listEntities.currentPageIndex" [(nzPageSize)]="listEntities.pageSize"
      [nzTotal]="listEntities.recordTotalCount" (nzPageIndexChange)="getEntityList()" nzShowTotal></nz-pagination>
  </nz-spin>

</div>
